<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!--[if lt IE 9]>
    <script type="text/javascript" src="/admin/lib/html5shiv.js"></script>
    <script type="text/javascript" src="/admin/lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui/css/H-ui.css" />
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="/admin/lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/style.css" />
    <!--[if IE 6]>
    <script type="text/javascript" src="/admin/lib/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title></title>
    <style>
        .tabBar span.current{background-color: #5a98de;color: #fff}
    </style>
</head>

<body>
    <div id="HuiTab-demo" class="HuiTab">
        <div class="tabBar clearfix" style="position: fixed;top:0;width: 100%;border-bottom: 2px solid #33aba0;background-color:#fff;">
            <span>不合格样品</span>
            <span>斗臂车</span>
            <div class="btn btn-primary radius f-r" onclick="javascript:window.location.reload();">刷新</div>
        </div>
        <div class="tabCon mt-30" style="display: block;">
            <table class="table table-border table-bg table-bordered radius table-hover"  style="width:100%;height:100%;overflow-scrolling: auto;">
                <thead >
                    <tr class="nonbatch">
                        <th>客户名称</th>
                        <th width="30%">批次编号 (数量)</th>
                        <th width="20%">操作</th>
                    </tr>
                    <tr class="hidden nonbatch-detail-head">
                        <th width="13%">序号</th>
                        <th>样品名称</th>
                        <th width="25%">条形码</th>
                        <th width="30%">图片</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($zunon as $batchNum => $nonlist)
                        <tr class="nonbatch">
                            <td>{{$nonlist[0]->client_name}}</td>
                            <td class="{{$batchNum}}">{{$batchNum}} ({{count($nonlist)}})</td>
                            <td><span class="btn btn-primary-outline radius" onclick="showPi('non','{{$batchNum}}',0)">点击进入</span></td>
                        </tr>
                        @foreach($nonlist as $k => $item)
                        <tr class="hidden nonbatch-detail nonbatch-{{$batchNum}}" id="{{$item->bar_code}}">
                            <td>{{$k + 1}}</td>
                            <td>{{$item->tool_name}}</td>
                            <td>{{$item->bar_code}}</td>
                            <td>
                                <img class='img-responsive forphoto-{{$item->bar_code}}' src='' onclick="zoomimg(this)">
                                <a onclick="paizhao(this)">
                                    <svg t="1614762830952" class="icon mt-10" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3527" width="20" height="20"><path d="M605 152c13 0 24.5 8.3 28.5 20.7l4.1 12.5c14.8 51.3 61.6 86.8 115.3 86.8H872c16.5 0 30 13.5 30 30v540c0 16.5-13.5 30-30 30H152c-16.5 0-30-13.5-30-30V302c0-16.5 13.5-30 30-30h119.1c53.7 0 100.6-35.5 115.3-86.8l4.1-12.5c4-12.4 15.5-20.7 28.5-20.7h186m0-90H419c-51.9 0-97.9 33.4-114.1 82.7l-4.8 14.6c-3.3 13.4-15.3 22.7-29.1 22.7H152c-66.3 0-120 53.7-120 120v540c0 66.3 53.7 120 120 120h720c66.3 0 120-53.7 120-120V302c0-66.3-53.7-120-120-120H752.9c-13.8 0-25.8-9.4-29.1-22.7l-4.8-14.6C702.9 95.4 656.9 62 605 62z" fill="#2081F6" p-id="3528"></path><path d="M512 452c66.2 0 120 53.8 120 120s-53.8 120-120 120-120-53.8-120-120 53.8-120 120-120m0-90c-116 0-210 94-210 210s94 210 210 210 210-94 210-210-94-210-210-210z" fill="#4C4F54" p-id="3529"></path><path d="M812 377m-45 0a45 45 0 1 0 90 0 45 45 0 1 0-90 0Z" fill="#4C4F54" p-id="3530"></path></svg>
                                </a>
                                <a class="ml-10 btn btn-primary radius hidden up-{{$item->bar_code}}" onclick="tijiao('{{$item->id}}','{{$item->bar_code}}','non')">提交</a>
                                <input name="non_photo" bar-code="{{$item->bar_code}}" class="inputfile hidden" accept='image/*' type='file' />
                            </td>
                        </tr>
                        @endforeach
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="tabCon mt-30" style="display: none;">
            <table class="table table-border table-bg table-bordered radius table-hover"  style="width:100%;height:100%;overflow-scrolling: auto;">
                <thead >
                    <tr class="batch">
                        <th>客户名称</th>
                        <th width="30%">批次编号 (数量)</th>
                        <th width="20%">操作</th>
                    </tr>
                    <tr class="hidden batch-detail-head">
                        <th width="20%">序号</th>
                        <th width="30%">条形码</th>
                        <th width="30%">图片</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($zudou as $batchNum => $doulist)
                        <tr class="batch">
                            <td>{{$doulist[0]->client_name}}</td>
                            <td class="{{$batchNum}}">{{$batchNum}} ({{count($doulist)}})</td>
                            <td><span class="btn btn-primary-outline radius" onclick="showPi('','{{$batchNum}}',0)">点击进入</span></td>
                        </tr>
                        @foreach($doulist as $k => $item)
                            <tr class="hidden batch-detail batch-{{$batchNum}}" id="{{$item->bar_code}}">
                                <td>{{$k + 1}}</td>
                                <td>{{$item->bar_code}}</td>
                                <td>
                                    <img class='img-responsive forphoto-{{$item->bar_code}}' src='' onclick="zoomimg(this)">
                                    <a onclick="paizhao(this)">
                                        <svg t="1614762830952" class="icon mt-10" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3527" width="20" height="20"><path d="M605 152c13 0 24.5 8.3 28.5 20.7l4.1 12.5c14.8 51.3 61.6 86.8 115.3 86.8H872c16.5 0 30 13.5 30 30v540c0 16.5-13.5 30-30 30H152c-16.5 0-30-13.5-30-30V302c0-16.5 13.5-30 30-30h119.1c53.7 0 100.6-35.5 115.3-86.8l4.1-12.5c4-12.4 15.5-20.7 28.5-20.7h186m0-90H419c-51.9 0-97.9 33.4-114.1 82.7l-4.8 14.6c-3.3 13.4-15.3 22.7-29.1 22.7H152c-66.3 0-120 53.7-120 120v540c0 66.3 53.7 120 120 120h720c66.3 0 120-53.7 120-120V302c0-66.3-53.7-120-120-120H752.9c-13.8 0-25.8-9.4-29.1-22.7l-4.8-14.6C702.9 95.4 656.9 62 605 62z" fill="#2081F6" p-id="3528"></path><path d="M512 452c66.2 0 120 53.8 120 120s-53.8 120-120 120-120-53.8-120-120 53.8-120 120-120m0-90c-116 0-210 94-210 210s94 210 210 210 210-94 210-210-94-210-210-210z" fill="#4C4F54" p-id="3529"></path><path d="M812 377m-45 0a45 45 0 1 0 90 0 45 45 0 1 0-90 0Z" fill="#4C4F54" p-id="3530"></path></svg>
                                    </a>
                                    <a class="ml-10 btn btn-primary radius hidden up-{{$item->bar_code}}" onclick="tijiao('{{$item->id}}','{{$item->bar_code}}','')">提交</a>
                                    <input name="photo" bar-code="{{$item->bar_code}}" class="inputfile hidden" accept='image/*' type='file' />
                                </td>
                            </tr>
                        @endforeach
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    <script type="text/javascript" src="/admin/lib/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="/admin/lib/layer/3.1.1/layer.js"></script>
    <script type="text/javascript" src="/admin/static/h-ui/js/H-ui.min.js"></script>
    <script type="text/javascript" src="/admin/static/h-ui.admin/js/H-ui.admin.js"></script>
    <script type="text/javascript" src="/admin/static/myfolder/js/imgopreate.js"></script>
    <script>
        $(function () {
            $("#HuiTab-demo").Huitab({
                index:0
            });
        })
        var index2,base='non';
        function tijiao(id,code,columnbase) {
            let base64data = $('.forphoto-'+code).attr('src');
            if (base64data === '') {
                layer.alert('请先上传新的不合格照');
                return false;
            }
            let data = {
                detail_id: id,
                _token: '{{ csrf_token() }}',
            };
            columnbase === 'non' ? (data.non_photo = base64data) : (data.photo = base64data);
            $.ajax({
                type: 'post',
{{--                url: '/{{config('constant.name_admin')}}/sampleInfo/indexInfoLuru',--}}
                url: 'list/sub',
                // dataType: 'json',
                data: data,
                success: function (data) {
                    if (data === '1') {
                        layer.msg('图片上传成功!', {icon: 1, time: 1000});
                        let batchnum = code.substring(0,code.length-3);
                        let bros = $('#'+code).siblings('.'+ columnbase +'batch-'+ batchnum);
                        bros.each(function (i,item) {
                            $(item).children('td:first-child').text(i + 1);
                        })
                        //修改批次列表中的编号数量
                        let len = bros.length,dir = $('.'+columnbase + 'batch > .'+ batchnum);
                        len === 0 ? dir.parent('tr').remove() : dir.text(batchnum + ' ('+ len +')');
                        $('#'+code).remove();
                    } else {
                        layer.msg('图片上传失败!', {icon: 2, time: 2000});
                    }
                },
                error: function (data) {
                    ajax_error(data);
                },
                beforeSend: function () {
                    //0.4透明度 白色遮罩
                    index2 = layer.load(2, {shade: [0.05, '#000']});
                },
                complete: function () {
                    layer.close(index2);
                },
            });
        }
        function zoomimg(e){
            let src = $(e).attr("src");
            var obj = {
                urls : [src],
                current : src
            };
            previewImage.start(obj);
        }
        function paizhao(e,code) {
            $(e).siblings('input').trigger('click');
        }
        $('.inputfile').on('change', function (e) {
            let barcode = $(e.target).attr('bar-code');
            var file = e.target.files[0],//拿到原始对象
                thisType = file.type,//获取到表面的名称，可判断文件类型
                reader = new FileReader(),
                img = e.target.nextSibling;
            if (thisType.indexOf('image/') !== 0) {
                layer.alert('该文件不是图片！');
                return false;
            }
            if (file.size > 500 * 1024) {
                //调用函数,对图片进行压缩
                compressimg(file, function (imgBase64) {
                    $(img).attr('src', imgBase64);
                })
            }
            //readAsDataURL(file),读取文件，将文件以数据URL的形式保存在result的属性中
            reader.readAsDataURL(file);
            //文件加载成功以后，渲染到页面
            reader.onload = function (e) {
                $('.forphoto-'+barcode).attr('src', e.target.result).load(function () {/*如果要获取图片的真实的宽度和高度有三点必须注意1、需要创建一个image对象：如这里的$("")2、指定图片的src路径3、一定要在图片加载完成后执行如.load()函数里执行*/
                    let realWidth = this.width, realHeight = this.height,bili=(realHeight/realWidth).toFixed(2);//如果真实的宽度大于浏览器的宽度就按照100%显示
                    if((bili <0.77 && bili > 0.73) || (bili < 1.35 && bili > 1.31)){
                        $('.up-'+barcode).removeClass('hidden');
                    }else{
                        layer.msg('图片不符合要求');
                        $('.up-'+barcode).addClass('hidden');
                        return false;
                    }
                })
            }
        })
        function showPi(zhui='',batchNum='',showBatch=1) {
            base = zhui;
            if(showBatch === 1){
                $('.'+base+'batch').removeClass('hidden');
                $('.'+base+'batch-detail').addClass('hidden');
                $('.'+base+'batch-detail-head').addClass('hidden');
            }else{
                $('.'+base+'batch').addClass('hidden');
                $('.'+base+'batch-detail-head').removeClass('hidden');
                $('.'+base+'batch-'+batchNum).removeClass('hidden');
            }

        }
        //监听向左滑动
        $('body').on('touchstart', '', function(e) {
            var touch = e.originalEvent,
                startX = touch.changedTouches[0].pageX;
            $(this).on('touchmove', function(e) {
                // e.preventDefault();
                touch = e.originalEvent.touches[0] ||
                    e.originalEvent.changedTouches[0];
                if (touch.pageX - startX > 80) {//向左
                    showPi(base);
                    $(this).off('touchmove');
                } else if (touch.pageX - startX < -20) {//向右
                    $(this).off('touchmove');
                }
            });

        }).on('touchend', function() {
            $(this).off('touchmove');
        });
    </script>

</body>

</html>
